<template>
   <div class="addannouncement">
      <!-- <el-button v-if="isfabu === false" type="primary" @click="isfabu = true">发布一条公告</el-button>
      <el-button v-else type="primary" @click="isfabu = false">返回公告列表</el-button> -->
      <div class="title-btn">
         <button v-if="isfabu === false" @click="isfabu = true">发布一条公告</button>
         <button v-else style="background: #df890b;" @click="isfabu = false">返回公告列表</button>
      </div>
   </div>
   <div v-if="isfabu === false">
      <el-table :data="SystemData.SystemAnnounceList" stripe style="width: 100%" max-height="580">
         <el-table-column prop="title" label="公告标题" width="120">
            <template #default="row">
               <el-input v-model="row.row.title" />
            </template>
         </el-table-column>
         <el-table-column prop="content" label="内容">
            <template #default="row">
               <el-input v-model="row.row.content" />
            </template>
         </el-table-column>
         <el-table-column prop="cover" label="公告图">
            <template #default="row">
               <el-input v-model="row.row.cover" />
            </template>
         </el-table-column>
         <el-table-column prop="intervalTime" label="间隔时长" width="100">
            <template #default="row">
               <el-input v-model="row.row.intervalTime" />
            </template>
         </el-table-column>
         <el-table-column prop="intervalTime" label="操作" fixed="right" width="90">
            <template #default="row">
               <div style="display: flex;">
                  <button style="background: #a1241b;margin: 0;" @click="deleteAn(row.row)">删除</button>
               </div>
            </template>
         </el-table-column>
      </el-table>
   </div>
   <div v-else>
      <p>公告弹窗只会弹出最新发布的公告。( 0.1 小时代表6分钟 )</p>
      <div class="set">
         <el-radio-group v-model="announcementData.type" class="ml-4">
            <el-radio label="announcement">公告通知</el-radio>
            <!-- <el-radio label="activity">活动通知</el-radio> -->
         </el-radio-group>
         <div style="display: flex;align-items: center;margin: 0 30px;">
            <span style="margin-right:10px;">弹窗间隔多少小时后重新弹出</span>
            <el-input-number v-model="announcementData.intervalTime" class="mx-4" />
         </div>
      </div>
      <div class="title">
         <input type="text" v-model="announcementData.title" placeholder="填写公告/活动标题">
      </div>
      <div class="content">
         <textarea minlength="5" v-model="announcementData.content" placeholder="请认真填写通知内容，拒绝垃圾信息传播！(建议一句话概括)"></textarea>
      </div>
      <div class="addBtn">
         <div class="addBtn-btn">
            <div v-for="(item, index) in announcementData.btn" :key="index" @click="delBtn(item)">
               {{ item.name }}
            </div>
         </div>
         <div class="addBtn-add">
            <input type="text" v-model="inputValue.name" placeholder="按钮名字">
            <!-- <input type="text" v-model="inputValue.path" placeholder="按钮跳转地址 (选填)"> -->
            <div class="btn" @click="addBtn">添加</div>
         </div>
      </div>
      <div class="path">
         <input type="text" v-model="inputValue.path" placeholder=" (选填) 按钮跳转地址，留空默认跳转至公告页面：https://XXX">
      </div>
      <div class="uploadimg">
         <div class="uploading">
            <div>上传封面</div>
            <div>(可选)</div>
         </div>
         <div class="image" v-if="announcementData.cover">
            <img :src="announcementData.cover" alt="">
         </div>
         <!-- 发布按钮 -->
         <div class="announce" @click="announce">立即发布</div>
      </div>

   </div>
</template>
<script lang="ts" setup >
import { storeToRefs } from 'pinia';
import { ElMessage } from "element-plus";
const { userinfo } = storeToRefs(cnyzsUserpinia())
// ForumData
const props = defineProps({
   SystemData: {
      type: Object,
      default: {
         SystemInfo: {},
         SystemConfig: {},
         SystemAnnounceList: [],
         SystemUserInfo: [],
         SystemUserList: [],
         SystemClassifyList: [],
         SystemPostsList: [],
      }
   }
})



// 公告相关
const isfabu = ref(false)
const announcementData: any = ref({
   ismaster: false,
   type: 'announcement',
   intervalTime: 2,
   title: '',
   content: '',
   cover: '',
   path: '',
   btn: [], // 按钮
})

// 按钮inputvalue
const inputValue: any = ref({ name: '', path: '' })
// 添加按钮
const addBtn = () => {
   if (announcementData.value.btn.length >= 2) return ElMessage.warning('只能添加两个按钮')
   if (!inputValue.value.name) return ElMessage.warning('按钮名称不能留空')
   announcementData.value.btn.push({
      name: inputValue.value.name,
      path: inputValue.value.path,
   })
   ElMessage.success('已添加')
   inputValue.value = { name: '', path: '' }
}
// 删除按钮
const delBtn = (item: any) => {
   announcementData.value.btn.forEach((v: any, index: number) => {
      if (v.name === item.name && v.path === item.path) {
         announcementData.value.btn.splice(index, 1)
      }
   })
   ElMessage.success('已删除')
}
// 发布公告
const announce = async () => {
   console.log( props.SystemData.SystemInfo._id);
   
   if (!announcementData.value.title || !announcementData.value.content) {
      return ElMessage.warning('标题和内容不得为空')
   }
   if (announcementData.value.btn.length === 0) return ElMessage.warning('必须添加按钮')
   const res: any = await cnyzsRequest('/api/cnyzs-system-announcement/create', {
      method: 'POST', data: {
         systemId: props.SystemData.SystemInfo._id,
         id: props.SystemData.SystemInfo._id,
         data: announcementData.value
      }
   })
   if (res.status === 200) {
      ElMessage.success(res.message)
      // 清空
      isfabu.value = false
      announcementData.value = {
         ismaster: false,
         type: 'announcement',
         intervalTime: 5,
         title: '',
         content: '',
         cover: '',
         path: '',
         btn: [],
      }
   } else {
      ElMessage.warning(res.message)
   }
}
// 删除公告
const deleteAn = async (item: any) => {
   // 據點創建者
   if (props.SystemData.SystemInfo.sns_createUser._id === userinfo.value._id) return del()
   // 據點管理員
   if (props.SystemData.SystemInfo.sns_auth.some((v: any) => v._id === userinfo.value._id)) return del()
   async function del() {
      const res: any = await cnyzsRequest('/api/cnyzs-system-announcement/delete', { method: 'POST', data: item })
      if (res.status !== 200) return ElMessage.warning(res.message)
      ElMessage.success(res.message)
   }
}






</script>
<style lang="scss" scoped>
button {
   background: #419643;
   border: 0;
   box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
   color: #fdfdfd;
   cursor: pointer;
   display: flex;
   align-items: center;
   font-size: 14px;
   font-weight: 600;
   height: 35px;
   justify-content: center;
   margin-right: 15px;
   padding: 0 15px;
   transition: all 0.2s;
   border-radius: 8px;

   &:hover {
      opacity: .8;
   }
}

.addannouncement {
   .title-btn {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .btnActive {
         background-color: #1b5fa1;
      }
   }
}

p {
   color: #999;
   margin: 10px 0;
   font-size: 14px;
}

.set {
   width: 100%;
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   font-size: 14px;
   color: #555555;
}

.title {
   input {
      width: 100%;
      height: 45px;
      border: 0;
      font-size: 16px;
      background-color: #FFF;
      border-bottom: 1px solid #f5f6f7;
      margin-bottom: 5px;
      border-radius: 4px;
      caret-color: var(--aoir-color-primary-2);
      padding: 0 10px;
      border-radius: var(--aoir-border-radius);
      box-shadow: 0 0 35px 0 rgb(108 108 108 / 10%);

      &::placeholder {
         color: #CCD0DB;
      }
   }
}

.content {

   textarea {
      border: 0;
      width: 100%;
      height: 220px;
      resize: none;
      font-size: 16px;
      line-height: 26px;
      caret-color: var(--aoir-color-primary-2);
      padding: 5px 10px;
      overflow: hidden;
      overflow-wrap: break-word;
      border-radius: var(--aoir-border-radius);
      box-shadow: 0 0 35px 0 rgb(108 108 108 / 10%);

      &::placeholder {
         color: #CCD0DB;
         font-size: 16px;
      }
   }
}

.addBtn {
   width: 100%;
   display: flex;
   align-items: center;

   .addBtn-btn {
      display: flex;
      align-items: center;

      div {
         padding: 6px 14px;
         border-radius: 6px;
         background-color: var(--aoir-color-primary);
         color: #FFF;
         font-weight: 600;
         cursor: pointer;
         margin-right: 15px;
         margin-bottom: 5px;
      }
   }

   .addBtn-add {
      display: flex;
      align-items: center;

      input {
         width: auto;
         height: 45px;
         border: 0;
         font-size: 16px;
         background-color: #FFF;
         border-bottom: 1px solid #f5f6f7;
         margin-bottom: 5px;
         border-radius: 4px;
         caret-color: var(--aoir-color-primary-2);
         padding: 0 10px;
         border-radius: var(--aoir-border-radius);
         box-shadow: 0 0 35px 0 rgb(108 108 108 / 10%);
         margin-right: 10px;

         &::placeholder {
            color: #CCD0DB;
         }
      }

      .btn {
         padding: 6px 14px;
         border-radius: 6px;
         background-color: var(--aoir-color-primary);
         color: #FFF;
         font-weight: 600;
         cursor: pointer;
         margin-bottom: 5px;
      }
   }
}

.path {
   input {
      width: 100%;
      height: 45px;
      border: 0;
      font-size: 16px;
      background-color: #FFF;
      border-bottom: 1px solid #f5f6f7;
      margin-bottom: 5px;
      border-radius: 4px;
      caret-color: var(--aoir-color-primary-2);
      padding: 0 10px;
      border-radius: var(--aoir-border-radius);
      box-shadow: 0 0 35px 0 rgb(108 108 108 / 10%);

      &::placeholder {
         color: #CCD0DB;
      }
   }
}

.uploadimg {
   display: flex;
   align-items: center;
   position: relative;

   .announce {
      position: absolute;
      right: 0;
      top: 0;
      padding: 6px 14px;
      border-radius: 6px;
      background-color: var(--aoir-color-primary);
      color: #FFF;
      font-weight: 600;
      cursor: pointer;
   }

   .uploading {
      width: 83.7px;
      height: 83.7px;
      margin-right: 10px;
      margin-bottom: 10px;
      cursor: pointer;
      box-shadow: 0 0 35px 0 rgba(108, 108, 108, 0.1);
      border-radius: 4px;
      position: relative;
      border-radius: var(--aoir-border-radius);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #999999;
      cursor: not-allowed;
   }

   .image {
      width: 83.7px;
      height: 83.7px;
      margin-right: 10px;
      margin-bottom: 10px;
      cursor: pointer;
      border-radius: 4px;
      position: relative;
      border-radius: var(--aoir-border-radius);
      overflow: hidden;
      box-shadow: 0 0 35px 0 rgba(108, 108, 108, 0.1);

      img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         border-radius: var(--aoir-border-radius);
      }
   }
}
</style>